<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <div class="profile-header">
        <el-avatar :size="120" :src="authStore.userAvatar"  class="profile-avatar" />
        <div class="profile-info">
          <h1 class="profile-name">{{ authStore.user.nickname  || authStore.user.username  }}</h1>
          <p class="profile-title">心理咨询师</p>
        </div>
      </div>
 
      <el-divider />
 
      <div class="profile-details">
        <div class="detail-item">
          <span class="detail-label">姓名</span>
          <span class="detail-value">{{ authStore.user.nickname  || authStore.user.username  }}</span>
        </div>
        
        <div class="detail-item">
          <span class="detail-label">职位</span>
          <span class="detail-value">心理咨询师</span>
        </div>
        
        <div class="detail-item">
          <span class="detail-label">电话号码</span>
          <span class="detail-value">{{ authStore.user.phone  || '未设置' }}</span>
        </div>
      </div>
 
      <el-divider />
 
      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-number">{{ patientStats.totalPatients  }}</div>
          <div class="stat-label">患者总数</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-number">{{ registrationStats.todayAppointments  }}</div>
          <div class="stat-label">今日问诊</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-number">{{ registrationStats.completedAppointments  }}</div>
          <div class="stat-label">已完成</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-number">{{ registrationStats.inProgressAppointments  }}</div>
          <div class="stat-label">进行中</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-number">{{ registrationStats.pendingFollowUp  }}</div>
          <div class="stat-label">待复诊</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-number">{{ registrationStats.pendingAppointments  }}</div>
          <div class="stat-label">待问诊</div>
        </div>
      </div>
 
      <div class="profile-actions">
        <el-button type="primary" @click="editProfile">编辑资料</el-button>
        <el-button @click="changePassword">修改密码</el-button>
      </div>
    </el-card>
 
    <!-- 编辑资料对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑资料" width="500px">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="昵称">
          <el-input v-model="editForm.nickname"  />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="editForm.phone"  />
        </el-form-item>
        <el-form-item label="头像">
          <el-upload 
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="editForm.avatar"  :src="editForm.avatar"  class="avatar">
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveProfile">保存</el-button>
      </template>
    </el-dialog>
 
    <!-- 修改密码对话框 -->
    <el-dialog v-model="passwordDialogVisible" title="修改密码" width="500px">
      <el-form :model="passwordForm" label-width="100px" :rules="passwordRules" ref="passwordFormRef">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword"  type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword"  type="password" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword"  type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePassword">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/user'
import { usePatientStore } from '@/stores/patientStore'
import { useRegistrationStore } from '@/stores/registrationStore'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
 
const authStore = useAuthStore()
const patientStore = usePatientStore()
const registrationStore = useRegistrationStore()
 
// 加载数据 
onMounted(async () => {
  await patientStore.fetchPatients() 
  await registrationStore.fetchRegistrations() 
})
 
// 患者统计 
const patientStats = computed(() => {
  return {
    totalPatients: patientStore.patients.length  
  }
})
 
// 预约统计 
const registrationStats = computed(() => {
  const today = new Date().toISOString().split('T')[0]
  const registrations = registrationStore.registrations  
  
  return {
    todayAppointments: registrations.filter(r  => r.date  === today).length,
    completedAppointments: registrations.filter(r  => r.status  === '已完成').length,
    inProgressAppointments: registrations.filter(r  => r.status  === '进行中').length,
    pendingFollowUp: registrations.filter(r  => r.status  === '待复诊').length,
    pendingAppointments: registrations.filter(r  => r.status  === '待问诊').length 
  }
})
 
// 编辑资料相关 
const editDialogVisible = ref(false)
const editForm = reactive({
  nickname: authStore.user.nickname  || '',
  phone: authStore.user.phone  || '',
  avatar: authStore.user.avatar  || ''
})
 
// 修改密码相关 
const passwordDialogVisible = ref(false)
const passwordFormRef = ref(null)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
 
const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword)  {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
 
// 打开编辑资料对话框 
const editProfile = () => {
  editForm.nickname  = authStore.user.nickname  || ''
  editForm.phone  = authStore.user.phone  || ''
  editForm.avatar  = authStore.user.avatar  || ''
  editDialogVisible.value  = true 
}
 
// 保存资料 
const saveProfile = async () => {
  try {
    const success = await authStore.updateUser({ 
      nickname: editForm.nickname, 
      phone: editForm.phone, 
      avatar: editForm.avatar  
    })
    
    if (success) {
      ElMessage.success(' 资料更新成功')
      editDialogVisible.value  = false 
    }
  } catch (error) {
    ElMessage.error(' 资料更新失败')
  }
}
 
// 头像上传成功 
const handleAvatarSuccess = (response) => {
  editForm.avatar  = response.url  
}
 
// 打开修改密码对话框 
const changePassword = () => {
  passwordForm.oldPassword  = ''
  passwordForm.newPassword  = ''
  passwordForm.confirmPassword  = ''
  passwordDialogVisible.value  = true 
}
 
// 保存密码 
const savePassword = async () => {
  try {
    await passwordFormRef.value.validate() 
    
    // 这里调用修改密码的API 
    // await axios.post('/api/change-password',  passwordForm)
    
    ElMessage.success(' 密码修改成功')
    passwordDialogVisible.value  = false 
  } catch (error) {
    if (error.message)  {
      ElMessage.error(error.message) 
    } else {
      ElMessage.error(' 密码修改失败')
    }
  }
}
</script>
 
<style lang="scss" scoped>
.profile-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
 
.profile-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
 
.profile-header {
  display: flex;
  align-items: center;
  padding: 20px;
}
 
.profile-avatar {
  margin-right: 30px;
  border: 4px solid #f0f2f5;
}
 
.profile-info {
  flex: 1;
}
 
.profile-name {
  margin: 0;
  font-size: 28px;
  color: #303133;
}
 
.profile-title {
  margin: 8px 0 0;
  color: #909399;
  font-size: 16px;
}
 
.profile-details {
  padding: 0 20px;
}
 
.detail-item {
  display: flex;
  margin-bottom: 16px;
  font-size: 16px;
}
 
.detail-label {
  width: 100px;
  color: #909399;
  font-weight: 500;
}
 
.detail-value {
  flex: 1;
  color: #303133;
}
 
.stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}
 
.stat-card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s;
 
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
}
 
.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}
 
.stat-label {
  font-size: 14px;
  color: #909399;
}
 
.profile-actions {
  padding: 20px;
  text-align: center;
}
 
.avatar-uploader {
  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
  }
}
 
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
 
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>